/* components */
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
import { ChartsSearchParams, ChartsSearchTimePeriodType, ChartsSearchTimePeriodTypeEnum } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/ChartsSearchModel'
/* scss */
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, ComputedRef, defineComponent, Ref, ref } from 'vue'
import { CommonComponentInstance } from '@model/VC'

type HandlerTimePeriodChangeFunctionType = (value: ChartsSearchTimePeriodType) => void;
type PublinkDatePeriodRangeComponentValueType = {
  // 开始日期
  startDate: Date | undefined,
  // 结束日期
  endDate: Date | undefined,
}

interface ChartTimePeriodSelectSetupState {
  // 时间周期数据变化事件
  handlerTimePeriodChange: HandlerTimePeriodChangeFunctionType;
  // 时间周期选择组件实例
  PublinkDatePeriodRangeComponent: Ref<ComponentInstance | null>;
  // 时间周期开始日期
  periodStartDate: ComputedRef<Date | undefined>;
  // 时间周期结束日期
  periodEndDate: ComputedRef<Date | undefined>;
  // 时间周期组件值
  periodValue: ComputedRef<PublinkDatePeriodRangeComponentValueType>;
}

enum ChartTimePeriodSelectEventEnum {
  Input = 'input'
}

export type ChartTimePeriodSelectProps = {
  value?: ChartsSearchParams
}
export type ChartTimePeriodSelectInstance = ComponentInstance & ChartTimePeriodSelectSetupState
export type ChartTimePeriodSelectVM = ComponentRenderProxy<ChartTimePeriodSelectProps> & CommonComponentInstance

export default defineComponent<ChartTimePeriodSelectProps, ChartTimePeriodSelectSetupState>({
  name: ComponentNameEnum.ChartTimePeriodSelect,
  props: {
    value: {
      type: Object,
      default: () => new ChartsSearchParams()
    }
  },
  setup(props: ChartTimePeriodSelectProps, { emit }) {
    
    // 时间周期选择组件实例
    const PublinkDatePeriodRangeComponent = ref(null)
    
    /**
     * @description 时间周期数据变化事件
     */
    const handlerTimePeriodChange: HandlerTimePeriodChangeFunctionType = (value: ChartsSearchTimePeriodType) => {
      
      emit(ChartTimePeriodSelectEventEnum.Input, value)
    }

    // 时间周期type
    const periodType: ComputedRef<ChartsSearchTimePeriodTypeEnum | undefined> = computed(() => {
      return props.value?.type
    })
    
    // 时间周期开始日期
    const periodStartDate: ComputedRef<Date | undefined> = computed(() => {
      return props.value?.periodStartDate
    })
    
    // 时间周期结束日期
    const periodEndDate: ComputedRef<Date | undefined> = computed(() => {
      return props.value?.periodEndDate
    })
    
    // 时间周期组件值
    const periodValue: ComputedRef<PublinkDatePeriodRangeComponentValueType> = computed(() => {
      return {
        startDate: periodStartDate.value,
        endDate: periodEndDate.value,
        type: periodType.value
      }
    })

    // 需要隐藏的周期
    const hidePeriodList: ComputedRef<object | undefined> = computed(() => {
      let info:any = {};
      props.value?.hidePeriodList?.forEach((x:string)=>{
        info[x] = true;
      })
      return info;
    })
    
    return {
      handlerTimePeriodChange,
      periodStartDate,
      periodEndDate,
      periodValue,
      PublinkDatePeriodRangeComponent,
      hidePeriodList
    }
  },
  render() {
    return (
      <div>
        <publink-date-period-range
          ref="PublinkDatePeriodRangeComponent"
          value={this.periodValue}
          {...{attrs: this.hidePeriodList}}
          onInput={this.handlerTimePeriodChange}
        >
        </publink-date-period-range>
      </div>
    )
  }
})
